<template>
	<view>
		<view class="container">
			<view class="m-hairline--bottom foot-line"></view>
			<image class="g-icon-bg1" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<view class="pt30 plr30 pb10" v-if="bannerLists.length > 0">
				<swiper class="course-swiper" autoplay circular>
					<swiper-item v-for="(item,index) in bannerLists" :key="item.id" @click="bannerNav(item.minapp_url)"><image class="img-swiper" :src="item.thumb_image" mode="aspectFill"></image></swiper-item>
				
				</swiper>
			</view>
			<!--  -->
			<view class="scroll-tab plr45 bg-white">
				<view @click="changeTag(index)" class="item" :class="tagIndex==index?'active':''" v-for="(item,index) in tagLists" :key="item.id">{{item.name}}</view>
				<!-- <view class="item">VIP</view>
				<view class="item">热门好评</view>
				<view class="item">视频</view>
				<view class="item ">音频</view> -->
			</view>
			<!--  -->
			<view class="cate-list flex flex-align-start">
				<view class="left-col">
					<view @click="changeCategory(-1)" class="left-item" :class="categoryIndex == -1 ? 'active' : ''" >全部</view>
					<view @click="changeCategory(index)" class="left-item" :class="categoryIndex == index ? 'active' : ''" v-for="(item,index) in categoryLists" :key="item.id">{{item.name}}</view>
				</view>
				<view class="right-col flex-1 ptb35 plr25">
					<view class="fs24 col-9 mb5">共{{total}}个内容</view>
					<!--  -->
					<view class="course-list2">
						<view @click="navication(item.id,item.type)" class="nav-course flex-box ptb30" v-for="(item,index) in course" :key="item.id">
							
							<image class="img-course mr20" :src="item.thumb_image" mode="aspectFill"></image>
							<view class="flex-1">
								<view class="m-ellipsis fs24 col-0 mb10">{{item.name}}</view>
								<view class="m-ellipsis fs20 col-6 mb10">{{item.description}}</view>
								<view class="flex-box">
									<image class="icon1 mr5" v-if="item.type == 3" src="/static/icon/icon_book.png" mode="aspectFit"></image>
									<image class="icon1 mr5" v-if="item.type == 2" src="/static/icon/icon_video.png" mode="aspectFit"></image>
									<image class="icon1 mr5" v-if="item.type == 1" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
									<view class="flex-1 fs18 col-9">{{item.type==3?item.total_num:item.play_count}}人学习过</view>
									<!-- ios端会屏蔽支付价格，如果需要开启请把v:if注释掉 -->
									<template v-if="!isIos || platformStatus==1">
										<view class="fs20 col-yellow" v-if="item.is_charge == 0" >免费</view>
										<view class="g-price1" v-else>{{item.salesprice}}</view>
									</template>
								</view>
							</view>
						</view>
						<view class="g-btn3-wrap">
							<view class="g-btn3" :class="{nomore: courseMore.nomore == true || courseMore.loading == true}" @click="fetch">{{courseMore.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script>
	const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			bannerLists: [],
			tagLists:[
				{"id":0,"name":"全部"},
				{"id":1,"name":"免费"},
				{"id":2,"name":"VIP"},
				{"id":3,"name":"热门好评"},
				{"id":4,"name":"视频"},
				{"id":5,"name":"音频"},
			],
			tagIndex:0,
			categoryLists:[],
			categoryIndex: -1,
			total:0,
			course: [],
			courseMore:{page:1},
			platformStatus: getApp().globalData.platformStatus,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad(options){
		this.fetchBanners();
		this.fetchCategoryLists();
		let tagIndex = uni.getStorageSync('type_index');
		tagIndex = tagIndex >= 0 ? tagIndex : 0;
		this.tagIndex = tagIndex < 0 ? 0 : tagIndex;
		uni.setStorageSync('type_index',0);
		this.fetch();
		let that = this;
		uni.$on('course_list',function(data){
			uni.setStorageSync('type_index',0);
			that.tagIndex = data
			that.refresh();
		})
	},
	onShow(){
		
	},
	onPullDownRefresh(){
		this.fetchBanners();
		this.fetchCategoryLists();
		this.refresh();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		bannerNav(url){
			if(url){
				uni.navigateTo({
					url: url
				})
			}
		},
		//切换标签
		changeTag(index){
			this.tagIndex = index;
			this.refresh();
		},
		//切换分类
		changeCategory(index){
			this.categoryIndex = index;
			this.refresh();
		},
		
		refresh(){
			this.course = [];
			this.courseMore = {page:1};
			this.fetch();
		},
		
		fetchBanners(){
			this.$core.get({url:'xiluedu.banner/banners',data:{group:'category_index'},success:(ret)=>{
			    this.bannerLists = ret.data;
			}});
		},
		fetchCategoryLists(){
			this.$core.get({url:'xiluedu.course_category/children',data:{},success:(ret)=>{
			    this.categoryLists = ret.data;
			}});
		},
		fetch() {
			let categoryId = 0;
			if(this.categoryIndex != -1){
				categoryId = this.categoryLists[this.categoryIndex].id;
			}
			let tag_id = 0;
			if(this.tagIndex != 0){
				tag_id = this.tagLists[this.tagIndex].id ?? 0;
			}
		    util.fetch(this, 'xiluedu.course/lists', {tag_id:tag_id,category_id:categoryId,pagesize:10}, 'courseMore', 'course', 'data', data=>{
		      this.total = data.total;
		    })
		},
		navication(id,type){
		  	if(type == 3){
		  		// 文章
		  		uni.navigateTo({
		  			url: "../article_detail/article_detail?course_id="+id
		  		})
		  	}else{
		  		uni.navigateTo({
		  			url: "../course_video_detail/course_video_detail?course_id="+id
		  		})
		  	}
		  },
	}
};
</script>

<style scoped>
.container {
	overflow: unset;
}
.course-swiper {
	width: 100%;
	height: 285rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.course-swiper .img-swiper {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.scroll-tab {
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	height: 100rpx;
	overflow-x: scroll;
	white-space: nowrap;
	z-index: 10;
}
.scroll-tab .item {
	display: inline-block;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 30rpx;
	color: #333333;
}
.scroll-tab .item + .item {
	margin-left: 80rpx;
}
.scroll-tab .item.active {
	font-size: 34rpx;
	font-weight: bold;
	color: #ed1f34;
}
/*  */
.cate-list {
	position: relative;
	background: #ffffff;
}
.cate-list .left-col {
	width: 190rpx;
	height: calc(100vh - 100rpx);
	background: #f8f8f8;
	overflow-y: scroll;
}

.cate-list .left-item {
	font-size: 28rpx;
	color: #666666;
	line-height: 90rpx;
	text-align: center;
}

.cate-list .left-item.active {
	color: var(--red);
	border-left: 6rpx solid var(--red);
	background: var(--white);
}

.cate-list .right-col {
	max-height: calc(100vh - 100rpx);
	overflow-y: scroll;
}

/*  */
.course-list2 {
	line-height: 1.2;
}
.course-list2 .img-course {
	width: 190rpx;
	height: 100rpx;
}
.course-list2 .nav-course + .nav-course {
	border-top: 1rpx solid var(--border);
}
/*  */
.more_text{
	margin: 0 auto;
}
@media only screen and (min-width: 800px) {
	.course-swiper{
		height: 636rpx;
		border-radius: 30rpx;
	}
}
</style>
